<div class="info">
  <span style="font-size: 24px;font-weight: 600;width: 400px;display: flex;flex-direction: row;align-items: center">订单状态：<span style="width: 200px"
    [attr.orderStatusColor]="orderDetail.status">{{ORDERSTATUS[orderDetail.status]}}</span></span>
  <!--    审核信息-->
  <div>
    <h2>审核信息</h2>
    <nz-row>
      <nz-col nzSpan="8">
        <span class="label">审核时间</span>
        <span>{{orderDetail.auditTime || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">审核状态</span>
        <span>{{AUDITSTATE[orderDetail.auditState]}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">审核备注</span>
        <span>{{orderDetail.auditDesc || '-'}}</span>
      </nz-col>
    </nz-row>
  </div>
  <!--    交易信息-->
  <div>
    <h2>
      交易信息
    </h2>
    <nz-row>
      <nz-col nzSpan="8" *ngIf="orderDetail.parentOrderNum">
        <span class="label">母订单编号</span>
        {{orderDetail.parentOrderNum}}
        <app-button-copy [text]="orderDetail.parentOrderNum"></app-button-copy>
      </nz-col>
<!--      <nz-col nzSpan="8" *ngIf="orderDetail.parentOrderNum">-->
<!--        <span class="label">订单编号</span>-->
<!--        {{orderDetail.orderNum}}-->
<!--        <app-button-copy [text]="orderDetail.orderNum"></app-button-copy>-->
<!--      </nz-col>-->
      <nz-col nzSpan="8">
        <span class="label">订单编号</span>
        {{orderDetail.orderNum}}
        <app-button-copy [text]="orderDetail.orderNum"></app-button-copy>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">下单时间</span>
        <span>{{orderDetail.createTime || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">付款时间</span>
        <span>{{orderDetail.payTime || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">支付方式</span>
        <span>{{PAYTYPE[orderDetail.payType] || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="24">
        <span class="label">交易单号(第三方)</span>
        <span style="width: 250px">{{orderDetail.payOrderNum || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="24">
        <span class="label">商户单号(第三方)</span>
        <span style="width: 250px">{{orderDetail.otherOrderNo || '-'}}</span>
      </nz-col>
    </nz-row>
  </div>

  <div>
    <h2>买家信息</h2>
    <nz-row>
      <nz-col nzSpan="8">
        <span class="label">用户ID</span>
        <span>{{orderDetail.userId || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">昵称</span>
        <span>{{orderDetail.userName || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">所在地区</span>
        <span style="width: 250px">{{cityChangeName(orderDetail['city'])}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">联系电话</span>
        <span>{{orderDetail.userTel || '-'}}</span>
      </nz-col>
    </nz-row>
  </div>

  <div>
    <h2>物流信息</h2>
    <nz-row>
      <nz-col nzSpan="8">
        <span class="label">收货人</span>
        <span>{{orderDetail.consignee || '-'}}</span>
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">收货人电话</span>
        <span>{{orderDetail.tel || '-'}}</span>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-col nzSpan="24">
        <span class="label">收货地址</span>
        <span style="width: 1000px">{{orderDetail.address || '-'}}</span>
      </nz-col>
    </nz-row>
    <nz-row *ngFor="let e of expressList">
      <nz-col nzSpan="8">
        <span class="label">物流公司名称</span>
        {{getLogisticsName(e.expressCode)}}
      </nz-col>
      <nz-col nzSpan="8">
        <span class="label">运单号</span>
        <a  style="color: #417DE5" (click)="showExpressModal(e['expressTraces'])">
          {{e.expressNum}}
        </a>
      </nz-col>
    </nz-row>
  </div>

  <div>
    <h2>商品信息</h2>
    <!--表格-->
    <nz-table #goodsTable [nzData]="orderDetail?.list" nzBordered="true"
              nzSize="small"
              nzShowSizeChanger
              nzShowPagination="false"
              [nzFrontPagination]="false"
    >
      <thead>
      <tr>
        <th nzAlign="center">商品信息</th>
        <th nzAlign="center">单价</th>
        <th nzAlign="center">数量</th>
        <th nzAlign="center">商品总额</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of goodsTable.data;let index=index">
        <td style="position: relative;padding-top: 24px">
          <h2 style="position: absolute;margin-top: 0;top: 0">{{data.groupName}}</h2>
          <div *ngFor="let detail of data?.list"
               style="display: flex;flex-direction: row;align-items: center;padding-left: 24px;height: 80px">
            <img
              nz-image
              width="60px"
              height="60px"
              style="margin-right: 8px"
              *ngIf="detail['icon']"
              [nzSrc]="detail['icon']"
              [alt]="detail['goodsName']"
            />
            <span>
              <div [nzTooltipTitle]="detail['goodsName']" nzTooltipPlacement="topCenter" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                   nz-tooltip>{{ detail['goodsName'] }}</div>
              <div style="color: rgba(0,0,0,.3)">{{ detail['type'] }}</div>
            </span>
          </div>
        </td>
        <td nzAlign="center" style="padding-top: 24px">
          <div style="height: 80px;display: flex;flex-direction: row;align-items: center;justify-content: center"
               *ngFor="let detail of data?.list">
            {{ detail['price'] }}
          </div>
        </td>
        <td nzAlign="center" style="padding-top: 24px">
          <div style="height: 80px;display: flex;flex-direction: row;align-items: center;justify-content: center"
               *ngFor="let detail of data?.list">
            {{ detail['num'] }}
          </div>
        </td>
        <td nzAlign="center">
          <div style="height: 80px;display: flex;flex-direction: row;align-items: center;justify-content: center"
               *ngFor="let detail of data?.list">
            {{ detail['totalPrice'] }}
          </div>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <div style="display: flex;flex-direction: row;align-items: center">
            <span class="label" style="text-align: right">运费：</span>￥{{orderDetail.expressPrice}}
          </div>
          <div style="display: flex;flex-direction: row;align-items: center">
            <span class="label" style="text-align: right">实收总额：</span>￥{{orderDetail.realPrice}}
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <div>
    <h2>跟进记录</h2>
    <!--表格-->
    <nz-table #trackTable [nzData]="trackList" nzBordered="true"
              nzSize="small"
              nzShowSizeChanger
              nzShowPagination="false"
              [nzFrontPagination]="false"
    >
      <thead>
      <tr>
        <th nzAlign="center">id</th>
        <th nzAlign="center">跟进时间</th>
        <th nzAlign="center">跟进人</th>
        <th nzAlign="center">跟进内容</th>
        <th nzAlign="center">附件</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of trackTable.data;let index=index">
        <td>{{data['id']}}</td>
        <td>{{data['createTime']}}</td>
        <td>{{data['follower']}}</td>
        <td>{{data['content']}}</td>
        <td style="white-space: pre-wrap;">
          <div style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
            <a *ngIf="data['enclosure']" [href]="data['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <!--  <div class="btnRow">-->
  <!--    <button nz-button nzType="primary" (click)="showTrackModal(22)">跟进</button>-->
  <!--    <button nz-button nzType="primary" (click)="showAfterSalesRefundModal('2')">售后退款</button>-->
  <!--  </div>-->
</div>

<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackList.length">
      <!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>


<!--售后退款-->
<nz-modal
  [(nzVisible)]="afterSalesRefundModal.visible"
  nzTitle="售后退款"
  (nzOnCancel)="hideAfterSalesRefundModal()">
  <div *nzModalContent>
    <div class="searchItem">
      <label for="afterSalesRefundModalPrice" style="width: 130px"><span>*</span>退款金额（元）：</label>
      <input id="afterSalesRefundModalPrice" nz-input placeholder="请输入退款金额" [(ngModel)]="afterSalesRefundModal.price"/>
    </div>
    <div class="searchItem afterSalesRefundModal">
      <label for="afterSalesRefundModalRemark" style="width: 130px">备注：</label>
      <textarea
        id="afterSalesRefundModalRemark"
        nz-input
        [maxLength]="100"
        [(ngModel)]="afterSalesRefundModal.remark"
        placeholder="请输入备注"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
    <div>
      <div>提示</div>
      <div>
        1、确认以后，该订单会直接将填写的款项原路退回到用户账户
      </div>
      <div>
        2、请提前做好备注记录，不要胡乱操作，避免造成损失
      </div>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideAfterSalesRefundModal()">取消</button>
    <button nz-button nzType="primary" (click)="refund()">确认</button>
  </div>
</nz-modal>

<!--修改收货信息-->
<nz-modal
  [(nzVisible)]="consigneeModal.visible"
  nzTitle="修改收货信息"
  (nzOnCancel)="hideConsigneeModal()">
  <div *nzModalContent>
    <div class="searchItem">
      <label style="width: 84px"><span>*</span>收货人：</label>
      <input nz-input placeholder="请输入收货人" [maxLength]="20" [(ngModel)]="consigneeModal.name"/>
    </div>
    <div class="searchItem">
      <label style="width: 84px"><span>*</span>联系电话：</label>
      <input nz-input placeholder="请输入联系电话" [maxLength]="11" [(ngModel)]="consigneeModal.tel"/>
    </div>
    <div class="searchItem">
      <label style="width: 84px"><span>*</span>收货地址：</label>
      <nz-cascader style="width: 250px" [(ngModel)]="consigneeModal.districtId" [nzOptions]="addressArea"></nz-cascader>
    </div>
    <div class="searchItem">
      <label style="width: 84px"></label>
      <textarea
        nz-input
        [maxLength]="100"
        [(ngModel)]="consigneeModal.address"
        placeholder="请输入备注"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideConsigneeModal()">取消</button>
    <button nz-button nzType="primary">确认</button>
  </div>
</nz-modal>

<!--物流信息-->
<nz-modal
  nzWidth="900px"
  [(nzVisible)]="expressModal.visible"
  [nzFooter]="null"
  nzTitle="物流信息"
  (nzOnCancel)="hideExpressModal()">
  <div *nzModalContent>
      <nz-timeline style="padding: 8px;">
        <nz-timeline-item [nzLabel]="lt['time']"
                          *ngFor="let lt of expressModal['track']">
          {{lt['station']}}
        </nz-timeline-item>
      </nz-timeline>
  </div>
</nz-modal>
